<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI对话助手</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        #app {
            width: 100%;
            max-width: 800px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 90vh;
        }
        
        .header {
            background: linear-gradient(90deg, #4f46e5, #7c3aed);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 24px;
            margin-bottom: 5px;
        }
        
        .header p {
            opacity: 0.9;
            font-size: 14px;
        }
        
        .chat-container {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background: #f8fafc;
        }
        
        .message {
            margin-bottom: 20px;
            display: flex;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .message.user {
            justify-content: flex-end;
        }
        
        .message-content {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 18px;
            line-height: 1.5;
        }
        
        .ai .message-content {
            background: white;
            border: 1px solid #e2e8f0;
            border-bottom-left-radius: 4px;
        }
        
        .user .message-content {
            background: #4f46e5;
            color: white;
            border-bottom-right-radius: 4px;
        }
        
        .message-typing {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            border-bottom-left-radius: 4px;
            max-width: 120px;
        }
        
        .typing-dots {
            display: flex;
        }
        
        .typing-dot {
            width: 8px;
            height: 8px;
            background: #94a3b8;
            border-radius: 50%;
            margin: 0 3px;
            animation: typingAnimation 1.4s infinite;
        }
        
        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes typingAnimation {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-5px); }
        }
        
        .input-container {
            padding: 20px;
            background: white;
            border-top: 1px solid #e2e8f0;
            display: flex;
            gap: 10px;
        }
        
        .message-input {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 24px;
            outline: none;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        .message-input:focus {
            border-color: #4f46e5;
        }
        
        .send-button {
            background: #4f46e5;
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .send-button:hover {
            background: #4338ca;
        }
        
        .send-button:disabled {
            background: #cbd5e1;
            cursor: not-allowed;
        }
        
        .send-icon {
            width: 24px;
            height: 24px;
        }
        
        .empty-state {
            text-align: center;
            color: #94a3b8;
            padding: 40px 20px;
        }
        
        .empty-state img {
            width: 100px;
            margin-bottom: 20px;
            opacity: 0.7;
        }
        
        @media (max-width: 600px) {
            #app {
                height: 100vh;
                border-radius: 0;
            }
            
            .message-content {
                max-width: 85%;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>AI智能助手</h1>
            <p>我可以回答您的问题并提供帮助</p>
        </div>
        
        <div class="chat-container" ref="chatContainer">
            <div v-if="messages.length === 0" class="empty-state">
                <svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z" fill="#94a3b8"/>
                </svg>
                <p>您好！我是您的AI助手，请问有什么可以帮您？</p>
            </div>
            
            <div v-for="(message, index) in messages" :key="index" :class="['message', message.sender]">
                <div class="message-content">
                    {{ message.text }}
                </div>
            </div>
            
            <div v-if="isTyping" class="message ai">
                <div class="message-typing">
                    <div class="typing-dots">
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="input-container">
            <input
                v-model="userInput"
                @keyup.enter="sendMessage"
                class="message-input"
                placeholder="输入您的问题..."
                :disabled="isTyping"
            >
            <button @click="sendMessage" class="send-button" :disabled="!userInput || isTyping">
                <svg class="send-icon" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
                </svg>
            </button>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted, nextTick } = Vue;
        
        createApp({
            setup() {
                const userInput = ref('');
                const messages = ref([]);
                const isTyping = ref(false);
                const chatContainer = ref(null);
                
                // 模拟AI响应
                const getAIResponse = async (userMessage) => {
                    // 这里应该调用您的API接口
                    // 以下是模拟实现
                    isTyping.value = true;
                    
                    // 模拟网络延迟
                    await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000));
                    
                    // 简单的响应逻辑（实际应用中应该调用API）
                    let response = '';
                    const lowerMessage = userMessage.toLowerCase();
                    
                    if (lowerMessage.includes('你好') || lowerMessage.includes('hello')) {
                        response = '您好！很高兴为您服务。请问有什么可以帮您？';
                    } else if (lowerMessage.includes('名字') || lowerMessage.includes('谁')) {
                        response = '我是一个AI助手，专门设计来回答您的问题和提供帮助。';
                    } else if (lowerMessage.includes('时间')) {
                        response = '当前时间是：' + new Date().toLocaleTimeString();
                    } else if (lowerMessage.includes('天气')) {
                        response = '抱歉，我目前无法获取实时天气信息。您可以尝试使用专业的天气应用或网站。';
                    } else {
                        response = '感谢您的消息。我还在学习中，可能会无法完全理解复杂的问题。如果您需要更专业的帮助，请提供更多细节。';
                    }
                    
                    return response;
                };
                
                const sendMessage = async () => {
                    if (!userInput.value.trim() || isTyping.value) return;
                    
                    // 添加用户消息
                    const userMessage = userInput.value.trim();
                    messages.value.push({
                        text: userMessage,
                        sender: 'user'
                    });
                    
                    // 清空输入框
                    userInput.value = '';
                    
                    // 滚动到底部
                    scrollToBottom();
                    
                    // 获取AI响应
                    try {
                        const aiResponse = await getAIResponse(userMessage);
                        
                        // 添加AI消息
                        messages.value.push({
                            text: aiResponse,
                            sender: 'ai'
                        });
                        
                        // 滚动到底部
                        scrollToBottom();
                    } catch (error) {
                        console.error('获取AI响应失败:', error);
                        messages.value.push({
                            text: '抱歉，我暂时无法响应您的请求，请稍后再试。',
                            sender: 'ai'
                        });
                        scrollToBottom();
                    } finally {
                        isTyping.value = false;
                    }
                };
                
                const scrollToBottom = () => {
                    nextTick(() => {
                        if (chatContainer.value) {
                            chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
                        }
                    });
                };
                
                // 初始化示例对话
                onMounted(() => {
                    messages.value.push({
                        text: '您好！我是AI助手，请问有什么可以帮您？',
                        sender: 'ai'
                    });
                });
                
                return {
                    userInput,
                    messages,
                    isTyping,
                    chatContainer,
                    sendMessage
                };
            }
        }).mount('#app');
    </script>
</body>
</html>